<template>
	<div>
		<HeaderComponent />
		<div class="content-box">
			<div class="content-sub-box">
				<LeftMenuComponent activeIndex="3" />
				<div class="content-right-box">
					<div class="right-top-box">
						<div class="right-vertical-box"></div>
						<div class="right-vertical-title-box">
							会刊内容提交
						</div>
					</div>
					<div class="login-box">
						<div class="top-nav-box">
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								企业基本信息确认
							</div>
							<div class="top-arrow">
								<img src="../assets/blue-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/blue-round.png" alt="">
							</div>
							<div class="top-font top-font-arrow">
								会刊提交
							</div>
							<div class="top-arrow">
								<img src="../assets/gay-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								预览
							</div>
							<div class="top-arrow">
								<img src="../assets/gay-arrow.png" alt="">
							</div>
							<div class="top-round">
								<img src="../assets/gay-round.png" alt="">
							</div>
							<div class="top-font">
								确认提交
							</div>
						</div>
						<div class="top-nav-help-box">
							<div><span>
									*大会会刊采取中英文混排的排版方式，您所提交的中英文信息将同时出现在贵公司的会刊页。
								</span></div>
							<div><span>
									*大会会刊在线提交的内容有四部分:联系方式、企业logo、企业简介和主营业务。除主营业务，其他栏目均为选填项，如您不予填写，大会会刊相应栏目将无法显示信息。</span>
							</div>

							<div><span>*本页面将于2024年11月8日关闭，此日期前可随时进行修改，请务必于此日期前完成确认和提交。</span></div>
						</div>
						<div class="contact-box">
							<el-form :model="ruleForm" :rules="rules" label-position="top" status-icon ref="ruleForm"
								label-width="100px" class="demo-ruleForm">
								<div class="contact-title-box">
									*联系方式：
								</div>
								<div class="contact-info-box">
									<el-form-item label="企业全称(中):" prop="company_title" required>
										<el-input v-model="ruleForm.company_title"></el-input>
									</el-form-item>
									<el-form-item label="企业全称(英):" prop="e_company_title">
										<el-input v-model="ruleForm.e_company_title"></el-input>
									</el-form-item>
									<el-form-item label="通讯地址(中):" prop="address" required>
										<el-input v-model="ruleForm.address"></el-input>
									</el-form-item>
									<el-form-item label="通讯地址(英):" prop="e_address">
										<el-input v-model="ruleForm.e_address"></el-input>
									</el-form-item>
									<el-form-item class="contact-input-small" label="邮编:" prop="postal_code">
										<el-input v-model="ruleForm.postal_code"></el-input>
									</el-form-item>
									<el-form-item class="contact-input-small" label="电话:" prop="phone" required>
										<el-input v-model="ruleForm.phone"></el-input>
									</el-form-item>
									<el-form-item class="contact-input-small" label="邮箱:" prop="email" required>
										<el-input v-model="ruleForm.email"></el-input>
									</el-form-item>
									<el-form-item label="企网:" prop="company_website">
										<el-input v-model="ruleForm.company_website"></el-input>
									</el-form-item>
								</div>
								<div class="contact-title-box">
									*LOGO提交：
								</div>
								<div class="contact-info-box">
									<el-upload class="avatar-uploader" action="' '" :file-list="fileList"
										:http-request="saveFile" :before-upload="beforeAvatarUpload">
										<img v-if="ruleForm.avatar" :src="ruleForm.avatar" class="avatar">
										<el-icon v-else class="avatar-uploader-icon">
											<Plus />
										</el-icon>
									</el-upload>
									<span class="contact-logo-font">提交须知:双击区域上传图片,支持提交文件的扩展名为"JPG(300DPI),AI, EPS
										PDF,PSD,PNG"，文件大小勿超过3M。</span>
								</div>
								<div class="contact-title-box">
									*企业简介：
								</div>
								<div class="contact-info-box">
									<el-form-item label="企业简介(中):" prop="company_detail" required>
										<el-input type="textarea" placeholder="请输入企业简介(中)"
											v-model="ruleForm.company_detail" maxlength="500" show-word-limit>
										</el-input>
									</el-form-item>
									<el-form-item label="企业简介(英):" prop="e_company_detail">
										<el-input type="textarea" placeholder="请输入企业简介(英)"
											v-model="ruleForm.e_company_detail" maxlength="5000" show-word-limit>
										</el-input>
									</el-form-item>
								</div>
								<div class="contact-title-box">
									*主营业务(此为必填项,可多选)：
								</div>
								<div class="contact-info-box">
									<el-form-item prop="checked_main_business">
										<el-checkbox-group v-model="ruleForm.checked_main_business"
											@change="checkChange">
											<el-checkbox v-for="(item) in main_business" :label="item.label"
												:key="item.label">{{item.value}}</el-checkbox>
										</el-checkbox-group>
									</el-form-item>
									<el-form-item label="主营产品:" prop="other_detail" required>
										<el-input v-model="ruleForm.other_detail"></el-input>
									</el-form-item>
								</div>
								<el-form-item class="form-btn-box">
									<el-button class="save-btn" type="primary"
										@click="submitForm('ruleForm')">提交</el-button>
								</el-form-item>
							</el-form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<FooterComponent />
	</div>
</template>

<script>
	import {
		uploads
	} from "/src/api/upload.js";
	import {
		mainBusinessShow,
		create,
		update,
		show
	} from "/src/api/journalContent.js";
	import HeaderComponent from './Header.vue';
	import FooterComponent from './Footer.vue';
	import LeftMenuComponent from './LeftMenu.vue';
	import {
		Plus
	} from '@element-plus/icons-vue'
	export default {
		name: 'JournalContentComponent',
		components: {
			HeaderComponent,
			FooterComponent,
			LeftMenuComponent,
			Plus
		},
		data() {
			var validateCompanyTitle = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入企业全称(中)'));
				} else {
					callback();
				}
			};
			var validateAddress = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入通讯地址(中)'));
				} else {
					callback();
				}
			};
			var validatePhone = (rule, value, callback) => {
				const phoneReg = /^1[3-9]\d{9}$/;
				const telReg = /^(\d{3,4}-)?\d{7,8}$/;
				if (!value) {
					return callback(new Error('请输入电话'));
				} else if (!phoneReg.test(value)) {
					if (!telReg.test(value)) {
						return callback(new Error('请输入正确的手机号或座机格式'));
					} else {
						callback();
					}
				} else {
					callback();
				}
			};
			var validateEmail = (rule, value, callback) => {
				const emailReg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
				if (!value) {
					return callback(new Error('请输入邮箱'));
				} else if (!emailReg.test(value)) {
					return callback(new Error('请输入正确的邮箱格式'));
				} else {
					callback();
				}
			};
			var validateCompanyDetail = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入企业简介(中)'));
				} else {
					callback();
				}
			};
			var validateOtherDetail = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('请输入主营产品'));
				} else {
					callback();
				}
			};
			return {
				main_business: [],
				saveMethods: 1,
				ruleForm: {
					avatar: '',
					company_title: '',
					company_sub_title: '',
					e_company_title: '',
					e_company_sub_title: '',
					address: '',
					e_address: '',
					phone: '',
					wx_code: '',
					email: '',
					company_website: '',
					postal_code: '',
					other_detail: ' ',
					company_detail: ' ',
					e_company_detail: ' ',
					checked_main_business: [],
					new_main_business: []
				},
				rules: {
					company_title: [{
						validator: validateCompanyTitle,
						required: true,
						trigger: 'blur'
					}],
					address: [{
						validator: validateAddress,
						required: true,
						trigger: 'blur'
					}],
					phone: [{
						validator: validatePhone,
						required: true,
						trigger: 'blur'
					}],
					email: [{
						validator: validateEmail,
						required: true,
						trigger: 'blur'
					}],
					company_detail: [{
						validator: validateCompanyDetail,
						required: true,
						trigger: 'blur'
					}],
					checked_main_business: [{
						type: 'array',
						required: true,
						message: '请至少选择一个选项',
						trigger: 'blur'
					}],
					other_detail: [{
						validator: validateOtherDetail,
						required: true,
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			handleAvatarSuccess(res, file) {
				this.imageUrl = URL.createObjectURL(file.raw);
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (this.saveMethods == 1) {
							create(this.ruleForm).then(data => {
								if (data.data.code == 200) {
									this.$message({
										message: '提交成功！',
										type: 'success'
									});
									this.$router.push("/journal-content-detail")
								} else {
									this.$message({
										message: data.data.message,
										type: 'error'
									});
								}
							})
						} else {
							console.log(this.ruleForm);
							update(this.ruleForm).then(data => {
								if (data.data.code == 200) {
									this.$message({
										message: '提交成功！',
										type: 'success'
									});
									this.$router.push("/journal-content-detail")
								} else {
									this.$message({
										message: data.data.message,
										type: 'error'
									});
								}
							})
						}
					} else {
						this.$message({
							message: '请完成必填信息及正确格式！',
							type: 'error'
						});
						return false;
					}
				});
			},
			show() {
				mainBusinessShow().then(data => {
					// this.main_business = data.data.data;
					let rows = data.data.data;
					for (let i = 0; i < rows.length; i++) {
						this.main_business.push({
							'label': rows[i].id.toString(),
							'value': rows[i].name
						});
					}
					console.log(this.main_business);
				});
				show().then(data => {
					let rows = data.data.data;
					if (Object.keys(rows).length !== 0) {
						console.log(rows);
						this.ruleForm.company_title = rows.cn_enterprise_full;
						this.ruleForm.company_sub_title = rows.cn_enterprise_short;
						this.ruleForm.e_company_title = rows.en_enterprise_full;
						this.ruleForm.e_company_sub_title = rows.en_enterprise_short;
						this.ruleForm.address = rows.cn_address;
						this.ruleForm.e_address = rows.en_address;
						this.ruleForm.postal_code = rows.post_code;
						this.ruleForm.phone = rows.telephone;
						this.ruleForm.wx_code = rows.wx;
						this.ruleForm.email = rows.e_mail;
						this.ruleForm.wx_code = rows.wx;
						this.ruleForm.company_website = rows.url;
						this.ruleForm.other_detail = rows.other;
						this.ruleForm.id_code_type = rows.files;
						this.ruleForm.company_detail = rows.cn_company_introduction;
						this.ruleForm.e_company_detail = rows.en_company_introduction;
						this.ruleForm.checked_main_business = rows.main_business_arr;
						this.ruleForm.new_main_business = rows.main_business_arr;
						this.ruleForm.avatar = rows.files;
						if (rows.cn_company_introduction) {
							this.saveMethods = 2;
						}
					}
				})
			},
			checkChange(e) {
				this.ruleForm.new_main_business = e;
			},
			beforeAvatarUpload(file) {
				const allowedTypes = ['ai', 'eps', 'pdf', 'psd', 'jpg', 'png'];
				const extension = file.name.split('.').pop().toLowerCase();
				const isAllowed = allowedTypes.includes(extension);

				if (!isAllowed) {
					this.$message.error('只能上传JPG, AI, EPS, PDF, PSD, PNG文件!');
					return false;
				}

				const isLt3M = file.size / 1024 / 1024 < 3;

				if (!isLt3M) {
					this.$message.error('上传图片大小不能超过 3MB!');
				}
				return isAllowed && isLt3M;
			},
			saveFile(param) {
				uploads(param.file).then(data => {
					this.ruleForm.avatar = data.data.data;
				});
			},
		},
		created() {
			this.show();
		}
	}
</script>

<style scoped>
	.top-font-arrow {
		color: #188AF2 !important;
	}

	.contact-title-box {
		margin-top: 15px;
		margin-bottom: 10px;
		font-size: 16px
	}

	:deep(.el-button) {
		width: 170px;
		height: 35px;
		background: #2B64A8;
		border-radius: 4px;
		font-size: 16px;
		margin: auto;
		margin-top: 25px;
	}

	:deep(.el-checkbox) {
		margin-right: 20px;
	}

	:deep(.el-textarea__inner) {
		height: 100px;
	}

	.contact-logo-font {
		font-weight: 400;
		font-size: 14px;
		color: #2B64A8;
		line-height: 30px;
		text-align: left;
		font-style: normal;
	}

	:deep(.avatar-uploader .el-upload) {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	:deep(.avatar-uploader .el-upload:hover) {
		border-color: #409EFF;
	}

	:deep(.avatar-uploader-icon) {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	:deep(.avatar) {
		width: 178px;
		height: 178px;
		display: block;
	}

	:deep(.el-form-item__label) {
		color: #000;
	}

	.contact-input-small {
		width: 350px;
		float: left;
		margin-right: 40px;
	}

	.contact-info-box {
		width: 805px;
		padding: 20px;
		border-radius: 4px;
		border: 1px solid #DDDFE4;
	}

	.contact-box {
		margin: auto;
		font-weight: bold;
		color: #4188EB;
		line-height: 30px;
		letter-spacing: 1px;
		text-align: left;
		font-style: normal;
		width: 850px;
		overflow: hidden;
	}

	.top-nav-help-box {
		width: 820px;
		height: 120px;
		background: #EEF4FE;
		border-radius: 4px;
		margin: auto;
		color: #4188EB;
		line-height: 31px;
		padding: 15px;
		margin-top: 20px;
		text-align: left;
		font-size: 16px
	}

	.top-nav-box {
		overflow: hidden;
		font-size: 16px
	}

	.top-round img {
		width: 100%;
	}

	.top-round {
		width: 18px;
		float: left;
		margin-left: 10px;
	}

	.top-arrow img {
		width: 100%;
	}

	.top-arrow {
		width: 42px;
		float: left;
		margin-left: 10px;
	}

	.top-font {
		float: left;
		color: #999999;
		line-height: 1.1;
		font-weight: 400;
		margin-left: 10px;
	}

	.login-box {
		width: 870px;
		/* height: 290px; */
		margin: 20px auto;
		border-radius: 3px;
		padding-top: 20px;
	}

	.right-vertical-title-box {
		width: 200px;
		height: 40px;
		font-size: 22px;
		color: #333333;
		line-height: 2.3;
		text-align: left;
		font-style: normal;
		overflow: hidden;
	}

	.right-vertical-box {
		width: 4px;
		height: 23px;
		background: #0066ad;
		float: left;
		margin-top: 15px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.right-top-box {
		height: 52px;
		width: 910px;
		border-bottom: 1px #DADADA solid;
	}

	.content-right-box {
		width: 910px;
		float: left;
		margin-left: 25px;
		overflow: hidden;
		margin-bottom: 30px;
		box-shadow: 0px 10px 20px 0px rgba(43, 100, 168, 0.1);
	}

	.content-box {
		overflow: hidden;
	}

	.el-menu .el-menu-item.is-active {
		background: rgb(0, 102, 173) !important;
		color: #fff;
	}

	.el-menu--horizontal>.el-sub-menu.is-active .el-sub-menu__title {
		border-bottom: 0;
	}

	.el-menu-vertical li {
		width: 220px !important;
		text-align: left;
		display: inherit;
		height: 45px;
		line-height: 2.5;
		color: rgb(0, 102, 173);
		background: #fff;
	}

	.el-menu-vertical {
		width: 220px;
		margin: auto;
		margin-top: 10px;
	}

	.content-left-box {
		width: 260px;
		overflow: hidden;
		height: 385px;
		border: 1px solid #eeeeee;
		float: left;
	}

	.content-left-font {
		font-size: 18px;
	}

	.contnet-menu-title-box {
		color: #fff;
		font-size: 22px;
		float: left;
		margin-top: 13px;
		margin-left: 15px;
	}

	.content-menu-icon-box img {
		width: 100%;
		height: 100%;
	}

	.content-menu-icon-box {
		width: 36px;
		height: 36px;
		float: left;
		margin-left: 45px;
		margin-top: 10px
	}

	.contnet-left-top-box {
		background-color: rgb(0, 102, 173);
		width: 260px;
		height: 60px;
	}

	.content-sub-box {
		width: 1220px;
		margin: auto;
		margin-top: 20px;
	}
</style>